<template>
	<view class="container">
		<view class="content">
			<view class="title">
				{{info.title}}
			</view>
			<view class="infoB">
				<view class="left">
					{{app.language.fbTime}}：{{info.releaseTime}}
				</view>
				<view class="right">
					{{app.language.ly}}：{{info.source}}
				</view>
			</view>
			<rich-text :nodes="formatRichText(info.articleContent)"></rich-text>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	import {
		newsList
	} from '@/api/news.js'
	const global = getApp().globalData;
	export default {
		data() {
			return {
				app: {
					global: global,
					name: global.appName,
					language: global.language
				},
				imgUrl: config.baseUrl,
				uuid: "",
				info: ""
			}
		},
		onLoad(options) {
			this.getNews(options.uuid)
		},
		methods: {
			getNews(uuid) {
				uni.showLoading({
					title: this.app.language.jzz,
				});
				let data = {
					"uuid": uuid
				}
				newsList(data).then((res) => {
					if (res.code == 200) {
						uni.hideLoading();
						this.info = res.rows[0]
					}
				})
			},

			formatRichText(html) {
				// html 就是你要传进来地富文本参数
				// 去掉img标签里的style、width、height属性
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				// 修改所有style里的width属性为max-width:100%
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				// 去掉<br/>标签
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				// img标签添加style属性：max-width:100%;height:auto
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:block;margin:0px auto;"');
				// 返回 处理后地结果
				return newContent;
			},
		},
	}
</script>

<style>
	.container {
		width: 100%;
	}

	.content {
		padding: 20rpx 40rpx;
		height: 100%;
		background-color: #fff;
		margin: 0 auto;
		font-size: 27rpx;
		line-height: 45rpx;
	}

	.infoB {
		font-size: 22rpx;
		color: #b9b9b9;
		display: flex;
		border-bottom: 1px solid #ddd;
		margin: 10rpx 0;
	}

	.right {
		margin-left: auto;
	}

	.title {
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
	}
</style>